<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        @click="s = index"
        :class="{ active: s == index }"
      >
        {{ item.name }}
      </li>
      <!-- <li><a href="#">帅啊</a></li>
      <li><a href="#">更多</a></li>
      <li><a href="#">我的</a></li> -->
    </ul>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    cc: {
      type: String
    },
    list: {
      type: Array
    }
  },
  data () {
    return {
      yi: '首页',
      s: 1
      // list:[]
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    fn () {
      this.$emit('aass')
    }
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: seagreen;
}
li {
  text-align: center;
  width: 100px;
  height: 100%;
  // background-color: red;
  line-height: 100px;
}

.active {
  background-color: pink;
}
</style>
